<template>
  <div>
  <!--wrap-->
  <div id="wrap">
    <section class="uc-list uc-setting">
      <ul>
        <li>
          <a class="link-icon clearfix" href="family.html">
							<span class="rb-left">
                        <i class="user-icon"></i>
                        家庭成员
                    </span>
            <b class="rb-right">2人</b>
          </a>
        </li>
        <li class="li-control">
          <a class="clearfix">
							<span class="rb-left">
                        <i class="eletric-set-icon"></i>
                        电池状态
                    </span>
            <b class="ab-right">5%</b>
          </a>
        </li>
        <li class="li-control">
          <a class="clearfix">
							<span class="rb-left">
                        <i class="babyclock-set-icon"></i>
                        儿童锁
                    </span>
            <span class="ab-right-2">儿童锁已关闭</span>
            <b class="ab-right switch round">
              <input id="mySwitch3" type="checkbox">
              <label for="mySwitch3"></label>
            </b>
          </a>
        </li>
        <li class="li-control" onclick="volumesettingShow()">
          <a class="link-icon clearfix">
							<span class="rb-left">
                        <i class="audio-set-icon"></i>
                        音量设置
                    </span>
            <b class="rb-right">0%</b>
          </a>
        </li>
        <li class="li-control">
          <a class="clearfix">
							<span class="rb-left">
                        <i class="light-set-icon"></i>
                        灯光控制
                    </span>
            <span class="ab-right-2">呼吸灯已开启</span>
            <b class="ab-right switch round">
              <input id="mySwitch4" type="checkbox">
              <label for="mySwitch4"></label>
            </b>
          </a>
        </li>
        <li onclick="showPicker();">
          <a class="link-icon clearfix">
							<span class="rb-left">
                        <i class="alerm-set-icon"></i>
                        定时关机
                    </span>
            <b class="rb-right"></b>
          </a>
        </li>
        <li>
          <a class="link-icon clearfix" href="device.html">
							<span clas="rb-left">
                        <i class="aboutroobo-set-icon"></i>
                        <span>关于机器人</span>
							</span>
          </a>
        </li>
      </ul>
    </section>

  </div>

  <!--定时关机弹出层 未使用-->
  <div class="clock" id="closeMech" style="display: none;">
    <div>
      <p>取消定时</p>
      <p>10分钟</p>
      <p>20分钟</p>
      <p>30分钟</p>
      <p>60分钟</p>
      <p>90分钟</p>
      <p>120分钟</p>
    </div>
  </div>

  <!--儿童锁弹出层-->
  <div class="childlock" style="display: none;" id="babylock">
    <div class="lockshow">
      <p>提示信息</p>
      <p>开启童锁后，机器人上的按键功能将失效。</p>
      <p>您确定要这么做吗？</p>
      <div>
        <div>
          <button type="button" style="margin-left: 0rem">确定</button>
        </div>
        <div>
          <button type="button" style="margin-left: .21rem">取消</button>
        </div>
      </div>
    </div>
  </div>

  <!--音量设置出层-->
  <div class="volumesetting" id="volumesetting" style="display: none;">
    <div class="volumeshow">
      <p>音量设置</p>
      <div style="margin-left: 17%; width: 66%;">
        <div class="weui-slider-box">
          <img src="static/img/icon/audio-set-icon.png">
          <div class="weui-slider">
            <div id="sliderInner" class="weui-slider__inner">
              <div id="sliderTrack" style="width: 0%;" class="weui-slider__track"></div>
              <div id="sliderHandler" style="left: 0%;" class="weui-slider__handler"></div>
            </div>
          </div>
          <div id="sliderValue" class="weui-slider-box__value">0%</div>
        </div>
      </div>
      <div style="text-align: center">
        <button type="button">完成</button>
      </div>
    </div>
  </div>
  <div class="picker">
    <div class="picker-mask mask-hook"></div>
    <div class="picker-panel panel-hook">
      <div class="picker-choose choose-hook">
        <span class="cancel cancel-hook">取消</span>
        <span class="confirm confirm-hook">确定</span>
        <h1 class="picker-title"></h1>
      </div>
      <div class="picker-content">
        <div class="mask-top border-1px"></div>
        <div class="mask-bottom border-1px"></div>
        <div class="wheel-wrapper wheel-wrapper-hook">

          <div class="wheel wheel-hook">
            <ul class="wheel-scroll wheel-scroll-hook">

              <li class="wheel-item" data-val="1">取消定时</li>

              <li class="wheel-item" data-val="2">立即关机</li>

              <li class="wheel-item" data-val="3">10分钟</li>

              <li class="wheel-item" data-val="4">20分钟</li>

              <li class="wheel-item" data-val="5">30分钟</li>

              <li class="wheel-item" data-val="6">60分钟</li>

              <li class="wheel-item" data-val="7">90分钟</li>

              <li class="wheel-item" data-val="8">120分钟</li>

            </ul>
          </div>

        </div>
      </div>
      <div class="picker-footer footer-hook"></div>
    </div>
  </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {}
    },
    mounted() {

    }
  }
</script>
<style>

</style>
